<template>
  <div class="myParcel">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="我的包裹"
      left-text
      left-arrow
      @click-left="onClickLeft"
      class="header"
    >
      <van-icon name="scan" slot="right" @click="scanBtn" />
      <van-icon name="service" slot="right" @click="serverBtn" />
    </van-nav-bar>

    <!--  tab 分页  -->
    <div class="nav_btn">
      <van-tabs class="nav_btn_top" v-model="active" color="#FF3B3E" line-width="35" :border="false">
        <van-tab class="nav_btn_content" title="待收货">
          <div class="nav_btn_content_item" v-for="(item, index) in waitGoods" :key="index">
            <div class="item_top">
              <h3 class="item_top_center">
                {{item.Courier}}: {{item.courierCode}}
              </h3>
              <span class="item_top_right">
                {{item.state}}
              </span>
            </div>
            <div class="item_middle">
              <h1 class="item_middle_title">{{item.parcelState}}</h1>
              <p class="item_middle_time">{{item.takeTime}}</p>
            </div>
            <div class="item_info">
              <span class="fuck_off_info">{{item.autoTaking}}后将自动确认收货</span>
            </div>
            <div class="item_bottom">
              <div class="item_bottom_left">
                <i class="item_bottom_left_states">共{{item.totalCount}}件宝贝</i>
              </div>
              <van-button class="item_bottom_right" type="default" @click="$router.push({path: '/orderDetails', query: {stateCode: 0}})">确认收货</van-button>
            </div>
          </div>
        </van-tab>
        <van-tab class="nav_btn_content" title="已收货">
          <div class="nav_btn_content_item" v-for="(item, index) in takingGoods" :key="index">
            <div class="item_top">
              <h3 class="item_top_center">
                {{item.Courier}}: {{item.courierCode}}
              </h3>
              <span class="item_top_right">
                {{item.state}}
              </span>
            </div>
            <div class="item_middle">
              <h1 class="item_middle_title">{{item.parcelState}}</h1>
              <p class="item_middle_time">{{item.takeTime}}</p>
            </div>
            <div class="item_bottom">
              <div class="item_bottom_left">
                <i class="item_bottom_left_states">共{{item.totalCount}}件宝贝</i>
              </div>
              <van-button class="item_bottom_right" type="default" @click="$router.push({path: '/orderDetails', query: {stateCode: 1}})">查看物品</van-button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "myParcel",
  data() {
    return {
      active: 0,
      // 已收货
      takingGoods: [
        {
          Courier: '顺丰',
          courierCode: '12163761743514',
          state: '已收货',
          totalCount: '1',
          parcelState: '已签收',
          takeTime:'2019-08-23  09:38:57',
        },
        {
          Courier: '顺丰',
          courierCode: '12163761743514',
          state: '已收货',
          totalCount: '1',
          parcelState: '已签收',
          takeTime:'2019-08-23  09:38:57',
        },
        {
          Courier: '顺丰',
          courierCode: '12163761743514',
          state: '已收货',
          totalCount: '1',
          parcelState: '暂无',
          takeTime:'',
        },
      ],
      // 待收货
      waitGoods: [
        {
          Courier: '顺丰',
          courierCode: '12163761743514',
          state: '已收货',
          totalCount: '1',
          parcelState: '快件在【深圳集散中心】已装车准备发往..',
          takeTime:'2019-08-23  09:38:57',
          autoTaking: '6天6小时51分',
        }
      ],
    }
  },
  created() {
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1)
    },
    // 右侧按钮
    scanBtn() {
      console.log("扫描二维码");
    },
    serverBtn() {
      console.log("按钮");
    },
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.myParcel {
  .header {
    width: 100%;
    height: 100px;
    @{deep} .van-icon {
      font-size: 19px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    @{deep} .van-icon-scan {
      margin-right: 20px;
    }
    @{deep} .van-nav-bar__title {
      line-height: 50px;
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
  .nav_btn {
    width: 100%;
    height:128px;
    .nav_btn_top {
      .nav_btn_content {
        padding: 77px 30px;
        .nav_btn_content_item {
          width:690px;
          margin-top: 30px;
          background:rgba(255,255,255,1);
          border-radius:9px;
          padding: 30px;
          .item_top {
            width: 100%;
            height: 66px;
            font-family:SourceHanSansCN;
            font-weight:400;
            border-bottom: 2px dotted rgba(226,226,226,1);
            .item_top_center {
              float: left;
              font-size:30px;
              line-height: 42px;
              color:rgba(51,51,51,1);
            }
            .item_top_right {
              float: right;
              font-size:26px;
              line-height: 42px;
              color:#FF7F3F;
            }
          }
          .item_middle {
            width: 100%;
            border-bottom: 2px dotted rgba(226,226,226,1);
            padding: 35px 0;
            .item_middle_title {
              font-size:28px;
              font-family:SourceHanSansCN;
              font-weight:600;
              color:rgba(51,51,51,1);
            }
            .item_middle_time {
              margin-top: 20px;
              font-size:24px;
              font-family:SourceHanSansCN;
              font-weight:400;
              color:rgba(136,136,136,1);
            }
          }
          .item_info {
            width:690px;
            height: 78px;
            line-height: 78px;
            margin-left: -30px;
            background: rgba(255, 59, 62, 0.08);
            padding-left: 30px;
            .fuck_off_info {
              font-size: 24px;
              font-family: SourceHanSansCN;
              font-weight: 400;
              color: rgba(255, 59, 62, 1);
            }
          }
          .item_bottom {
            height: 98px;
            .item_bottom_left {
              line-height: 98px;
              float: left;
              font-size:34px;
              font-family:Adobe Heiti Std;
              font-weight:normal;
              color:rgba(51,51,51,1);
              .item_bottom_left_states {
                font-size:26px;
                font-family:SourceHanSansCN;
                font-weight:400;
              }
            }
            .item_bottom_right {
              float: right;
              padding: 0;
              width:150px;
              height:58px;
              line-height: 58px;
              border:2px solid rgba(51,51,51,1);
              border-radius:29px;
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
